<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<canvas id="a" width="800" height="750" ></canvas>
<button onClick="copyimg()">导出图片</button>
<img id="img" width="600" height="300"/>
<script>
var a=document.getElementById("a");
var ctx=a.getContext("2d");
ctx.fillStyle="#000000";
ctx.fillRect(0,0,600,300);
//按下标记
var onoff=false;
var oldx=-10;
var oldy=-10;
//设置颜色
var linecolor="#ffffff";
//设置线宽
var linw=4;
//添加鼠标移动事件
a.addEventListener("mousemove",draw,true);
//添加鼠标按下事件
a.addEventListener("mousedown",down,false);
//添加鼠标弹起事件
a.addEventListener("mouseup",up,false);
function down(event){
	onoff=true;
	oldx=event.pageX-10;
	oldy=event.pageY-10;
}
function up(){
	onoff=false;	
}
function draw(event){
	if(onoff==true){
		var newx=event.pageX-10;
		var newy=event.pageY-10;
		ctx.beginPath();
		ctx.moveTo(oldx,oldy);
		ctx.lineTo(newx,newy);
		ctx.strokeStyle=linecolor;
		ctx.lineWidth=linw;
		ctx.lineCap="round";
		ctx.stroke();
		oldx=newx;
		oldy=newy;
		ctx.restore();
	}
}
function copyimg(event){
	var img_src=a.toDataURL("image/png");
	document.getElementById("img").src=img_src;
}
</script>
</body>
</html>
